<template>
	<div class="LeftMenu">
		<ul class="left-ment-list" v-if="leftMenuFlag">
			<li v-for="(item, index) in msg_list" :key="item.type" :class="activeClass == index ? 'active' : ''"
				@click="checkContent(index, item.path)" v-if="item.isShow">
				<img :src="require(`./svg/silder${item.ico}.svg`)" alt="" v-if="activeClass == index">
				<img :src="require(`./svg/silder${item.ico}_${item.ico}.svg`)" alt="" v-if="activeClass != index">
				<span style="margin-left: 2px; min-width: 56px; text-align: left">{{ item.title }}</span>
			</li>
		</ul>
		<ul class="left-ment-list-samll" v-if="!leftMenuFlag">
			<li v-for="(item, index) in msg_list" :key="item.type" :class="activeClass == index ? 'active' : ''"
				@click="checkContent(index, item.path)" v-if="item.isShow">
				<img :src="require(`./svg/silder${item.ico}.svg`)" alt="" v-if="activeClass == index">
				<img :src="require(`./svg/silder${item.ico}_${item.ico}.svg`)" alt="" v-if="activeClass != index">
			</li>
		</ul>
		<div class="left-menu-footer">
			<p v-if="leftMenuFlag" style="padding-bottom: 14px">
				<a :href="path1" target="_blank" style="color: rgba(0, 0, 0, 0.85)">{{ VersionHelp }}</a>
			</p>
			<p v-if="leftMenuFlag" style="padding-bottom: 14px">
				<a :href="path" target="_blank" style="color: rgba(0, 0, 0, 0.85)">Version:{{ VersionNo }}</a>
			</p>
			<i class="el-icon-s-fold" @click="toggerMenu" v-if="leftMenuFlag"></i>
			<i class="el-icon-s-unfold" @click="toggerMenu" v-if="!leftMenuFlag"></i>
		</div>
	</div>
</template>

<script>
import { getLocalStorage, setLocalStorage } from "../../utils/storage";
import $ from "jquery";
import { getVersionNo } from "../../api/api";
import eventBus from "@/eventBus/bus";
// 导出模块
export default {
	// 模块名字
	name: "LeftMenu",
	// 模块数据
	data() {
		//数据
		return {
			msg_list: [],
			activeClass: getLocalStorage("activeClass"),
			leftMenuFlag: true,
			path: "",
			VersionNo: "",
			path1: "",
			VersionHelp: "",

		};
	},
	// 注册组件
	components: {},
	// 监听指定值，只有指定值变化，才会触发
	watch: {},
	// 里面的函数只有调用才会执行（实时计算）里面是定义的方法
	methods: {
		checkContent(index, path) {

			if (this.activeClass == index) {
				return
			}

			eventBus.$emit('getDialog1Current_EventBus');	//	ﾗｲﾝｲﾝﾃﾞｯｸｽ编辑页是否更改
			eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

			let Fn = () => {
				console.log(index, path);
				this.activeClass = index;
				setLocalStorage("activeClass", index);
				if (path) {
					this.$router.push(path);
				}
			}
			/**
			 * 2。  记录当前函数。
			 */
			this.isCurrentNenxtFn(Fn);
		},
		isCurrentNenxtFn(Fn) {
			/**
			  * 3。  isCurrentNext。true=>往下，正常运行原有函数。
			  */

			if (this.$store.state.isCurrentNext) {
				Fn();
			} else {
				/**
				  * 4-1。   记录原来该运行的函数。
				  * 4-2。   执行保存弹出框操作。   
				  */
				this.$store.commit("changeIsCurrentFn", Fn);

				eventBus.$emit('EventBusSysViewInfoSaveFn');	//	系统情报
				eventBus.$emit('EventBusEvaluationInfoSaveFn');	//	机器评价
				eventBus.$emit('saveFnDialog1Current_EventBus');///	ﾗｲﾝｲﾝﾃﾞｯｸｽ保存弹框

				eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样

				if (this.$hasOption('OPT_FOC')) {
					eventBus.$emit('EventBusPartsSpecSaveFn');///	部位仕様
					eventBus.$emit('EventBusPartsDefineSaveFn');
				}
			}
		},
		toggerMenu() {
			this.leftMenuFlag = !this.leftMenuFlag;
			if (this.leftMenuFlag) {
				$(".LeftMenu").width("192");
				$(".View").width($(".Content").width() - 192);
			} else {
				$(".LeftMenu").width("64");
				$(".View").width($(".Content").width() - 64);
			}
		},
		getVersionNoApi() {
			getVersionNo().then((res) => {
				console.log(res, "getVersionNo");
				this.path = res.data.data[0].value;
				this.VersionNo = res.data.data[0].key;
				this.path1 = res.data.data[1].value;
				this.VersionHelp = res.data.data[1].key;
			});
		},
	},
	// 创建前状态(里面是操作)
	beforeCreate() { },
	// 创建完毕状态(里面是操作)
	created() {
		this.getVersionNoApi();
	},
	// 挂载前状态(里面是操作)
	beforeMount() { },
	// 挂载结束状态(里面是操作)
	mounted() {
		let _this = this;
		$(window).resize(function () {
			if (_this.leftMenuFlag) {
				$(".LeftMenu").width("192");
				$(".LeftMenu").css("min-width", "192px");
				$(".View").width($(".Content").width() - 192);
			} else {
				$(".LeftMenu").width("64");
				$(".View").width($(".Content").width() - 64);
			}
		});

		eventBus.$on("goPlanView", (index, path) => {
			this.checkContent(index, path)
		})

		this.msg_list = [];
		let userData = getLocalStorage("userData");
		userData.tMenuWeb.forEach(item => {
			var isVisible = false;
			if (item.isVisible == 1) {
				if (item.isAlwaysVisible == 1) {
					isVisible = true;
				} else {
					isVisible = userData[item.systemName.toLowerCase()] !== undefined ? userData[item.systemName.toLowerCase()] == 1 : false;
				}
			}

			// スーパーユーザー専用メニューの扱い
			if (item.isAdmin == 2) {
				isVisible = userData.accType == 3;
			}

			let tmenu = {
				type: String(item.id),
				title: item.label,
				path: item.path,
				userType: "1",
				isShow: isVisible,
				ico: item.icon
			};
			this.msg_list.push(tmenu);
		})
	},

	computed: {
		isBtnShow() {
			let userData = getLocalStorage("userData");
			return userData.reportPermiss == 1;
		},
	},
	// 更新前状态(里面是操作)
	beforeUpdate() { },
	// 更新完成状态(里面是操作)
	updated() { },
	// 销毁前状态(里面是操作)
	beforeDestroy() { },
	// 销毁完成状态(里面是操作)
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.LeftMenu {
	width: 192px;
	// min-width: 192px;
	height: 100%;
	background: #f8f8f8;
	position: relative;

	// border-right: 1px solid #b4b4b4;
	.left-ment-list {
		margin-top: 16px;

		li {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0 14px;
			width: 136px;
			height: 40px;
			font-size: 14px;
			text-align: center;
			line-height: 40px;
			color: rgba(0, 0, 0, 0.85);
			background: #f8f8f8;
			border-radius: 4px;
			margin: 0 auto;
			margin-bottom: 16px;
			cursor: pointer;
			border: 1px solid #dcdcdc;
			white-space: nowrap;

			.solid {
				width: 2px;
				height: 20px;
				background: rgba(255, 255, 255, 1);
			}

			.iconfont {
				font-size: 20px;
			}
		}

		.active {
			background: rgba(188, 0, 15, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 14px;
		}
	}

	.left-ment-list-samll {
		width: 64px;
		margin-top: 16px;

		li {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 40px;
			color: rgba(0, 0, 0, 0.85);
			font-size: 24px;
			cursor: pointer;
		}

		.active {
			background: rgba(188, 0, 15, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 14px;
		}
	}

	.left-menu-footer {
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		bottom: 26px;

		p {
			cursor: pointer;
		}

		.el-icon-s-fold,
		.el-icon-s-unfold {
			cursor: pointer;
			font-size: 24px;
		}
	}
}
</style>
